<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Slider 滑块</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
<style type="text/css">
.slider-demo-block1 {
	display: flex;
	align-items: center;
}
.slider-demo-block1 .el-slider {
	margin-top: 0;
	margin-left: 12px;
	flex: 100;
}
.slider-demo-block1 .demonstration {
	font-size: 14px;
	color: var(--el-text-color-secondary);
	line-height: 44px;
	/* flex: 1; */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-bottom: 0;
}
.demonstration{
	flex: 12;
	text-align: right;
	padding-right: 12px;
}


.slider-demo-block {
	display: flex;
	align-items: center;
}
.slider-demo-block .el-slider {
	margin-top: 0;
	margin-left: 12px;
}
</style>
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">在拖动滑块时，显示当前值</p>
	<p class="desc">通过设置绑定值自定义滑块的初始值</p>
	<div class="slider-demo-block1">
		<span class="demonstration">默认值为0</span>
		<el-slider v-model="value1"></el-slider>
	</div>
	<div class="slider-demo-block1">
		<span class="demonstration">设置初值</span>
		<el-slider v-model="value2"></el-slider>
	</div>
	<div class="slider-demo-block1">
		<span class="demonstration">设置最大范围</span>
		<el-slider v-model="value2" :max="200"></el-slider>
	</div>
	<div class="slider-demo-block1">
		<span class="demonstration">隐藏数值</span>
		<el-slider v-model="value3" :show-tooltip="false"></el-slider>
	</div>
	<div class="slider-demo-block1">
		<span class="demonstration">格式化数值</span>
		<el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>
	</div>
	<div class="slider-demo-block1">
		<span class="demonstration">禁用</span>
		<el-slider v-model="value5" disabled></el-slider>
	</div>
	
	<el-divider content-position="left">离散值</el-divider><!-- =============================================================== -->
	<p class="desc">选项可以是离散的</p>
	<p class="desc">改变step的值可以改变步长， 通过设置 show-stops 属性可以显示间断点</p>
	<div class="slider-demo-block1">
		<span class="demonstration">断点不显示</span>
		<el-slider v-model="value1" :step="10"></el-slider>
	</div>
	<div class="slider-demo-block1">
		<span class="demonstration">断点显示</span>
		<el-slider v-model="value2" :step="10" show-stops></el-slider>
	</div>
	<div class="slider-demo-block1">
		<span class="demonstration">断点显示</span>
		<el-slider v-model="value3" :step="25" show-stops></el-slider>
	</div>
	
	<el-divider content-position="left">带有输入框的滑块</el-divider><!-- =============================================================== -->
	<p class="desc">通过输入框设置精确数值</p>
	<p class="desc">设置 show-input 属性会在右侧显示一个输入框</p>
	<div class="slider-demo-block">
		<el-slider v-model="value11" show-input :max="1000"></el-slider>
	</div>
	
	<el-divider content-position="left">不同尺寸</el-divider><!-- =============================================================== -->
	<div class="slider-demo-block">
		<el-slider v-model="value" show-input size="large" /></el-slider>
	</div><br>
	<div class="slider-demo-block">
		<el-slider v-model="value" show-input /></el-slider>
	</div><br>
	<div class="slider-demo-block">
		<el-slider v-model="value" show-input size="small" /></el-slider>
	</div>
	
	<el-divider content-position="left">范围选择</el-divider><!-- =============================================================== -->
	<p class="desc">支持选择某一数值范围</p>
	<p class="desc">配置 range 属性以激活范围选择模式，该属性的绑定值是一个数组，由最小边界值和最大边界值组成。</p>
	<div class="slider-demo-block">
		<el-slider v-model="value6" range :max="100"> </el-slider>
	</div>
	
	<el-divider content-position="left">垂直模式</el-divider><!-- =============================================================== -->
	<p class="desc">配置 vertical 属性为 true 启用垂直模式。 在垂直模式下，必须设置 height 属性。</p>
	<div class="slider-demo-block">
		<el-slider v-model="value" vertical height="200px"></el-slider>
	</div>
	
	<el-divider content-position="left">展示标记</el-divider><!-- =============================================================== -->
	<p class="desc">设置 marks 属性可以在滑块上显示标记。</p>
	<div class="slider-demo-block">
		<el-slider v-model="value7" range :marks="marks"> </el-slider>
	</div>
	
</div>
</body>
<script>
const Main = {
	data() {
		return {
			value: 0,
			value1: 0,
			value2: 20,
			value3: 0,
			value4: 0,
			value5: 0,
			value11: 300,
			
			value6: [40, 80],
			
			value7: [30, 60],
			marks: {
				0: '0°C',
				8: '8°C',
				37: '37°C',
				50: {
					style: {
						color: '#ff0000',
					},
					label: '50%',
				},
			}
		}
	},
	methods:{
		formatTooltip(val){
			return val / 100
		},
	},
}
const app = Vue.createApp(Main);
app.use(ElementPlus);
app.mount("#app");

</script>
</html>
